<!--
 * @Author: ChunLai
 * @Date: 2022-11-29 17:03:41
 * @LastEditTime: 2025-09-10 17:29:30
 * @Description: 银行卡限额选择
 * @FilePath: \02.bldinsure\src\views\form\components\RadioBankSelect.vue
-->
<template>
  <div class="pop_main_cons">
    <div class="radio_select_tt">
      <span class="ftw5">请选择缴费银行</span>
      <span class="sure_btn" @click="sureClick">确认</span>
    </div>
    <div class="radio_select_ul">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell
            clickable
            v-for="(obj, lid) in viewOptions"
            :key="`${obj.keyId}${lid}`"
            :title-class="limitJudge(obj) ? 'forbid_css' : ''"
            @click="conformRadio(obj)"
          >
            <template #title>
              <div class="cell_tt">
                {{ `${obj.text}` }}
              </div>
            </template>
            <template #right-icon>
              <div class="cell_rr">
                <i v-if="limitJudge(obj)">
                  首期保费超过限额{{ limitText(obj) }}
                </i>
                <i class="desc_limit" v-else> 限额：{{ limitText(obj) }} </i>
              </div>
              <van-radio :name="obj.keyId" :disabled="limitJudge(obj)" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "RadioBankSelect",
  props: ["viewOptions", "payMode", "bankCode", "islimit"],
  data() {
    return {
      radio: this.bankCode || "",
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      totalPrem: "insert/totalPrem",
    }),
  },
  created() {},
  mounted() {},
  methods: {
    limitText(obj) {
      let res = "";
      const get_obj = this.payMode == "R" ? obj.small : obj.batch;
      if (get_obj) {
        res =
          get_obj.indexOf("元") !== -1
            ? get_obj
            : get_obj.indexOf("无限额") != -1
            ? "无限额"
            : `${get_obj}元`;
      } else {
        res = "暂无限额";
      }
      return res;
    },
    limitJudge(obj) {
      let res = false;
      const get_obj = this.payMode == "R" ? obj.limitR : obj.limitB;
      if (!get_obj || ["无限额"].includes(get_obj)) {
        res = false;
      } else {
        if (this.totalPrem * 1 >= get_obj) {
          res = true;
        }
      }
      return res;
    },
    conformRadio(value) {
      if (this.limitJudge(value)) {
        let tip = `首期保费（${this.totalPrem}）已超过所选银行的限额，请更换银行卡或者选择线下批扣`;
        this.$toast(tip);
        return;
      }
      let resObj = {
        bankCode: value.keyId,
        bankName: value.text,
      };
      this.radio = value.keyId;
      if (this.islimit) {
        this.$emit("changeRadio", value);
      } else {
        this.$emit("changeRadio", resObj);
      }
    },
    sureClick() {
      if (!this.radio) {
        this.$toast("请选择缴费银行");
        return;
      }
      this.$emit("sureClick");
    },
  },
};
</script>

<style lang="less" scoped>
.pop_main_cons {
  padding-bottom: 30px;

  .radio_select_tt {
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: relative;
    background-color: #f2f2f2;

    .sure_btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto;
      width: 50px;
      height: 50px;
      line-height: 50px;
      color: #1989fa;
    }

    .cancel_btn {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 10px;
      margin: auto;
      width: 40px;
      height: 30px;
      line-height: 30px;
      color: #999;
    }
  }
}

.radio_select_ul {
  height: 400px;
  // padding: 0 12px;
  overflow: hidden;
  overflow-y: scroll;
}

.cell_rr {
  margin-right: 10px;

  i {
    font-style: normal;
    font-size: 12px;
    color: #999;

    &.desc_limit {
      color: #f54040;
    }
  }
}

.forbid_css {
  color: #999;
}
</style>
